; (function () {
    const template = `<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        
    <!--右边上半区域-->
    <!--<h1 class="page-header">Dashboard</h1>-->
        <!--定义插槽-->
        <slot name="dashboard"></slot>
        <!--通过属性绑定的方式向子组件传递数据
            @自定义事件名=事件监听函数        
            在子组件 dashboard 中触发 了 delete_hobby 事件来调用 deleteHobby 函数
        -->
        <dashboard :hobbies="hobbies" @delete_hobby="deleteHobby"></dashboard>
    <!--右边下半区域-->
        <h2 class="sub-header">Section title</h2>
        <home-list :empList="empList" :deleteEmp="deleteEmp"></home-list>

      </div>`
    window.AppHome = {
        template,
        data() {
            return {
                hobbies: ['coding', '睡觉', '打豆豆', '看书'],
                empList: []
            }
        },
        methods: {
            deleteEmp(index) {
                this.empList.splice(index, 1)
            },
            deleteHobby(index) {
                this.hobbies.splice(index, 1)
            }
        },
        created() {
            axios.get('http://localhost:8080/db/emp.json')
                .then(response => {//function (response) {
                    console.log(response.data, this);
                    this.empList = response.data
                })
                .catch(error => {//function (error) {
                    alert(error.message)
                })
        },
        components:{
            Dashboard,
            HomeList
        }
    }

})()